<template>
	<view>
		<map show-location class="map" :class="['map' + index]" :latitude="lat" :longitude="lng" :markers="markers">
			<cover-image src="../../../static/imgs/backicon.png" class="icon" @click="back"></cover-image>
			<cover-image src="../../../static/imgs/order-grey.png" class="icon2" @click="index = 1"></cover-image>
			<cover-view
				style="width: 90%;position: absolute;background: #FFFFFF;border-radius: 10rpx;height: 80rpx;left: 5%;bottom: 20rpx;">
			</cover-view>
			<cover-view
				style="width: 80%;position: absolute;height: 80rpx;left: calc(10% + 20rpx);bottom: 20rpx;display: flex;align-items: center;justify-content: flex-end;">
				为保证您的隐私，请上车后再告诉手机尾号7595
			</cover-view>
			<cover-image src="/static/imgs/shijiansx.png"
				style="width: 40rpx;position: absolute;height: 40rpx;left: calc(5% + 20rpx);bottom: 40rpx;">
			</cover-image>
		</map>
		<!-- 正在呼叫 -->
		<view class="call-container" v-if="index == 0">
			<view class="top">
				<view class="title">正在全力呼叫车辆</view>
				<view class="quxiao" @click="index = 3">取消订单</view>
			</view>
			<view class="time">
				<text class="desc">请耐心等待</text>
				<text class="time-go">03:32</text>
			</view>
			<view class="car-list">
				<view class="car-item">
					<view class="left">
						<image
							src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=2f19117973aff7052d6f4a2f1c3684cd&wh_rate=null&src=http%3A%2F%2Ftiebapic.baidu.com%2Fforum%2Fwh%3D120%2C120%2Fsign%3Dae33eefac33f8794d3aa402fe02b22c5%2Fe4dde71190ef76c69b99f6698a16fdfaaf51672c.jpg">
						</image>
						<text>滴滴出行</text>
					</view>

					<view class="right">
						<text>预估<text style="color: #000000;font-size: 36rpx;font-weight: bolder;">35.8</text>元</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 全力呼叫 -->
		<view class="callall-container" v-if="index == 1">
			<view class="top">
				<view class="title">正在持续为你呼叫</view>
			</view>
			<view class="top">
				<text class="title">当前打车人数较多，请耐心等待</text>
			</view>
			<view class="car-list">
				<view class="car-item">
					<view class="left">
						<image
							src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=2f19117973aff7052d6f4a2f1c3684cd&wh_rate=null&src=http%3A%2F%2Ftiebapic.baidu.com%2Fforum%2Fwh%3D120%2C120%2Fsign%3Dae33eefac33f8794d3aa402fe02b22c5%2Fe4dde71190ef76c69b99f6698a16fdfaaf51672c.jpg">
						</image>
						<text>滴滴出行</text>
					</view>

					<view class="right">
						<text>预估<text style="color: #000000;font-size: 36rpx;font-weight: bolder;">35.8</text>元</text>
					</view>
				</view>
				<view class="car-item">
					<view class="left">
						<image
							src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=2f19117973aff7052d6f4a2f1c3684cd&wh_rate=null&src=http%3A%2F%2Ftiebapic.baidu.com%2Fforum%2Fwh%3D120%2C120%2Fsign%3Dae33eefac33f8794d3aa402fe02b22c5%2Fe4dde71190ef76c69b99f6698a16fdfaaf51672c.jpg">
						</image>
						<text>滴滴出行</text>
					</view>

					<view class="right">
						<text>预估<text style="color: #000000;font-size: 36rpx;font-weight: bolder;">35.8</text>元</text>
					</view>
				</view>
				<view class="car-item">
					<view class="left">
						<image
							src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=2f19117973aff7052d6f4a2f1c3684cd&wh_rate=null&src=http%3A%2F%2Ftiebapic.baidu.com%2Fforum%2Fwh%3D120%2C120%2Fsign%3Dae33eefac33f8794d3aa402fe02b22c5%2Fe4dde71190ef76c69b99f6698a16fdfaaf51672c.jpg">
						</image>
						<text>滴滴出行</text>
					</view>

					<view class="right">
						<text>预估<text style="color: #000000;font-size: 36rpx;font-weight: bolder;">35.8</text>元</text>
					</view>
				</view>
				<view class="car-item">
					<view class="left">
						<image
							src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=2f19117973aff7052d6f4a2f1c3684cd&wh_rate=null&src=http%3A%2F%2Ftiebapic.baidu.com%2Fforum%2Fwh%3D120%2C120%2Fsign%3Dae33eefac33f8794d3aa402fe02b22c5%2Fe4dde71190ef76c69b99f6698a16fdfaaf51672c.jpg">
						</image>
						<text>滴滴出行</text>
					</view>

					<view class="right">
						<text>预估<text style="color: #000000;font-size: 36rpx;font-weight: bolder;">35.8</text>元</text>
					</view>
				</view>
				<view class="car-item">
					<view class="left">
						<image
							src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=2f19117973aff7052d6f4a2f1c3684cd&wh_rate=null&src=http%3A%2F%2Ftiebapic.baidu.com%2Fforum%2Fwh%3D120%2C120%2Fsign%3Dae33eefac33f8794d3aa402fe02b22c5%2Fe4dde71190ef76c69b99f6698a16fdfaaf51672c.jpg">
						</image>
						<text>滴滴出行</text>
					</view>

					<view class="right">
						<text>预估<text style="color: #000000;font-size: 36rpx;font-weight: bolder;">35.8</text>元</text>
					</view>
				</view>
				<view class="recommd">
					<view>
						<view>推荐呼叫以上相似车型</view>
						<view>应答率提升62%</view>
					</view>
					<view class="hujiao">
						一键呼叫
					</view>
				</view>
			</view>
			<view class="btn-group">
				<view class="left-btn" @click="index = 2">再等等</view>
				<view class="right-btn" @click="index = 3">不用车了</view>
			</view>
		</view>

		<!-- 已生成订单 -->
		<view class="order-container" v-if="index == 2">
			<view class="top">
				<view class="title">曹操专车-经济型司机正在赶来</view>
			</view>
			<view class="time">
				<view class="desc">司机正在赶来，请提前前往上车地点，做好乘车准备</view>
			</view>
			<view class="tips">*本次行程为网约出租车，需进行线上支付</view>
			<view class="car-info">
				<view class="left-info">
					<view class="chepai" @click="index = 4">粤B06666</view>
					<view class="pingfen">
						<text>网约车·张师傅</text>
						<image src="../../../static/imgs/zuanshi.png"
							style="width: 30rpx;margin-left: 20rpx;margin-right: 10rpx;" mode="widthFix"></image>5.3
					</view>
				</view>
				<view class="right-info">
					<image src="../../../static/imgs/car.png" class="car" mode="widthFix"></image>
					<image src="../../../static/imgs/car-driver.png" class="person" mode="widthFix"></image>
				</view>
			</view>
			<view class="btn-group">
				<view class="btn">
					<image src="../../../static/imgs/110.png" class="icon"></image>
					<text>紧急求助</text>
				</view>
				<view class="btn">
					<image src="../../../static/imgs/phone.png" class="icon"></image>
					<text>打电话</text>
				</view>
				<view class="btn">
					<image src="../../../static/imgs/msg.png" @click="nav('./msg')" class="icon"></image>
					<text>发消息</text>
				</view>
				<view class="btn" @click="nav('./cancelReason')">
					<image src="../../../static/imgs/chacha.png" class="icon"></image>
					<text>取消行程</text>
				</view>
			</view>
		</view>

		<!-- 订单取消 -->
		<view class="cancel-container" v-if="index == 3">
			<view class="top">
				<view class="title">订单取消成功</view>
			</view>
			<view class="time">
				<text class="desc" style="color: #3587F7;">您可以重新打车</text>
			</view>

			<view class="order-info">
				<view class="order-start"><text class="green"></text>2021年03月14日 12:00</view>
				<view class="order-start"><text class="green"></text>庐山酒店</view>
				<view class="order-end"><text class="red"></text>国贸地铁站</view>
			</view>

			<view class="btn" @click="back">
				<text>重新打车</text>
			</view>
		</view>

		<!-- 去支付订单 -->
		<view class="payorder-container" v-if="index == 4">
			<view class="title">
				<view class="left">订单支付
					<image src="../../../static/imgs/shijiansx.png"
						style="width: 40rpx;height: 40rpx;margin-left: 20rpx;"></image>
				</view>
				<u-icon name="close"></u-icon>
			</view>
			<view class="desc">曹操专车提供本次服务，全程3.5公里 时长22分钟</view>
			<view class="price-container">
				<view class="price">
					39<text style="font-size: 24rpx;">元</text>
				</view>
				<view class="price-detail">
					<view class="label">里程费</view>
					<view class="value">23.58元</view>
				</view>
				<view class="price-detail">
					<view class="label">时长费</view>
					<view class="value">12.69元</view>
				</view>
				<view class="price-detail">
					<view class="label">高速费由司机手动添加</view>
					<view class="value">10元</view>
				</view>
				<view class="price-detail">
					<view class="label">里程费</view>
					<view class="value">23.58元</view>
				</view>
			</view>

			<view class="btn" @click="index = 5">
				<text>立即支付</text>
			</view>
		</view>

		<!-- 订单支付完成 -->
		<view class="okorder-container" v-if="index == 5">
			<view class="title">
				<view class="left">支付成功
					<image src="../../../static/imgs/success.png"
						style="width: 40rpx;height: 40rpx;margin-left: 20rpx;"></image>
				</view>
				<u-icon name="close"></u-icon>
			</view>
			<view class="desc">曹操专车提供本次服务，全程3.5公里 时长22分钟</view>
			<view class="price-container">

				<view class="price">
					39<text style="font-size: 24rpx;">元</text>
				</view>
				<block v-if="showAll">
					<view class="price-detail">
						<view class="label">里程费</view>
						<view class="value">23.58元</view>
					</view>
					<view class="price-detail">
						<view class="label">时长费</view>
						<view class="value">12.69元</view>
					</view>
					<view class="price-detail">
						<view class="label">高速费由司机手动添加</view>
						<view class="value">10元</view>
					</view>
					<view class="price-detail">
						<view class="label">里程费</view>
						<view class="value">23.58元</view>
					</view>
					<view class="xingcheng-title">
						行程详情<text class="sub-title">预估价和实际价均由服务商提供</text>
					</view>
					<u-time-line>
						<u-time-line-item node-top="60" bg-color="transparent">
							<template slot="node">
								<view class="circle"></view>
							</template>
							<template slot="content" @click="navigateTo(item.id)">
								<view class="xingcheng-title" style="font-size: 28rpx;">
									乘客下单<text class="sub-title" style="font-size: 24rpx;">2021-03-20 12:00:05</text>
								</view>
								<view class="xingcheng-item" style="font-weight: bold;">你选择了以下车辆</view>
								<view class="xingcheng-item">曹操专车 - 预估价12.56元</view>
								<view class="xingcheng-item">曹操专车 - 预估价12.56元</view>
								<view class="xingcheng-item">曹操专车 - 预估价12.56元</view>
							</template>
						</u-time-line-item>
						<u-time-line-item node-top="60" bg-color="transparent">
							<template slot="node">
								<view class="circle"></view>
							</template>
							<template slot="content" @click="navigateTo(item.id)">
								<view class="xingcheng-title" style="font-size: 28rpx;">
									司机接单<text class="sub-title" style="font-size: 24rpx;">2021-03-20 12:00:05</text>
								</view>
								<view class="xingcheng-item">曹操专车 - 预估价12.56元</view>
								<view class="xingcheng-item">曹操专车 - 预估价12.56元</view>
								<view class="xingcheng-item">曹操专车 - 预估价12.56元</view>
							</template>
						</u-time-line-item>
						<u-time-line-item node-top="60" bg-color="transparent">
							<template slot="node">
								<view class="circle"></view>
							</template>
							<template slot="content" @click="navigateTo(item.id)">
								<view class="xingcheng-title" style="font-size: 28rpx;">
									行程结束<text class="sub-title" style="font-size: 24rpx;">2021-03-20 12:00:05</text>
								</view>
								<view class="xingcheng-item">曹操专车 - 预估价12.56元</view>
								<view class="xingcheng-item">曹操专车 - 预估价12.56元</view>
								<view class="xingcheng-item">曹操专车 - 预估价12.56元</view>
							</template>
						</u-time-line-item>
					</u-time-line>
				</block>
				<view class="open" v-if="!showAll" @click="showAll = true">展开详情﹀</view>
				<view class="open" v-else @click="showAll = false">收起︿</view>
				<view class="driver-info">
					<view class="top">
						<image src="../../../static/imgs/car-driver.png" class="icon"></image>
						<text>曹操专车</text>
						<text>张师傅</text>
						<text>粤B06N20</text>
					</view>
					<view class="btn-group">
						<view class="btn">
							<image src="../../../static/imgs/110.png" class="icon"></image>
							<text>紧急求助</text>
						</view>
						<view class="btn">
							<image src="../../../static/imgs/phone.png" class="icon"></image>
							<text>拨打电话</text>
						</view>
						<view class="btn" @click="nav('./feedBack')">
							<image src="../../../static/imgs/msg.png" class="icon"></image>
							<text>投诉建议</text>
						</view>
						<view class="btn">
							<image src="../../../static/imgs/chacha.png" class="icon"></image>
							<text>联系客服</text>
						</view>
					</view>
				</view>
				<view class="pingjia">
					<view class="pingjia-title">司机服务怎么样？
						<text
							style="padding: 4rpx;border: 2rpx solid #999999;color: #999999;font-size: 20rpx;border-radius: 10rpx;">匿名</text>
					</view>
					<view class="xingxing">
						<image
							:src="pingfen > 0 ? `../../../static/imgs/xing-fill.png` : `../../../static/imgs/xing.png`"
							class="icon" @click="pingfen = 1">
						</image>
						<image
							:src="pingfen > 1 ? `../../../static/imgs/xing-fill.png` : `../../../static/imgs/xing.png`"
							class="icon" @click="pingfen = 2">
						</image>
						<image
							:src="pingfen > 2 ? `../../../static/imgs/xing-fill.png` : `../../../static/imgs/xing.png`"
							class="icon" @click="pingfen = 3">
						</image>
						<image
							:src="pingfen > 3 ? `../../../static/imgs/xing-fill.png` : `../../../static/imgs/xing.png`"
							class="icon" @click="pingfen = 4">
						</image>
						<image
							:src="pingfen > 4 ? `../../../static/imgs/xing-fill.png` : `../../../static/imgs/xing.png`"
							class="icon" @click="pingfen = 5">
						</image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lat: 0,
				lng: 0,
				markers: [],
				index: 0,
				showAll: false,
				pingfen: 0
			};
		},
		onLoad() {
			this.getLocation()
		},
		methods: {
			getLocation() {
				const that = this
				uni.getLocation({
					type: 'gcj02',
					success(e) {
						that.lat = e.latitude
						that.lng = e.longitude
						that.markers = [{
							id: 0,
							latitude: e.latitude,
							longitude: e.longitude,
							iconPath: '/static/imgs/location.png',
							width: 100,
							height: 100
						}]
					}
				})
			},
			back: uni.navigateBack,
			nav(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.map {
		width: 100%;
		height: 70vh;
		border: none;
		outline: none;
		margin: 0;
		padding: 0;

		&.map0 {
			height: 70vh
		}

		&.map1 {
			height: 30vh
		}

		&.map2 {
			height: 60vh
		}

		&.map3 {
			height: 60vh
		}

		&.map4 {
			height: 30vh
		}

		&.map5 {
			height: 30vh
		}

		.icon {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			left: 20rpx;
			top: calc(var(--status-bar-height) + 20rpx);
		}

		.icon2 {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			right: 20rpx;
			top: calc(var(--status-bar-height) + 20rpx);
		}
	}


	.call-container {
		width: 100%;
		position: relative;
		background: #FFFFFF;
		height: 30vh;
		overflow: scroll;
		padding: 20rpx 40rpx;

		.top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				font-size: 36rpx;
				font-weight: bolder;
				color: #1A1A1A;
			}

			.quxiao {
				padding: 10rpx 20rpx;
				border-radius: 60rpx;
				border: 2rpx solid #999999;
				color: #999999;
			}
		}

		.time {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-top: 20rpx;

			.desc {
				font-size: 30rpx;
				font-weight: 400;
				color: #999999;
			}

			.time-go {
				font-size: 46rpx;
				font-weight: bold;
				color: #1A1A1A;
				margin-left: 20rpx;
			}
		}

		.car-list {
			margin-top: 20rpx;
			border-top: 2rpx solid #F1F1F1;

			.car-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
				padding: 30rpx 0;

				.left {
					display: flex;
					align-items: center;
					justify-content: flex-start;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
				}

				.right {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					font-size: 30rpx;
				}
			}
		}

	}

	.callall-container {
		width: 100%;
		position: relative;
		background: #FFFFFF;
		height: 70vh;
		overflow: scroll;
		padding: 20rpx 40rpx;

		.top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				font-size: 36rpx;
				font-weight: bolder;
				color: #1A1A1A;
			}
		}

		.car-list {
			margin-top: 20rpx;
			border-top: 2rpx solid #F1F1F1;
			background: #F2F2F7;
			border-radius: 20rpx;

			.car-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
				padding: 30rpx;

				.left {
					display: flex;
					align-items: center;
					justify-content: flex-start;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
				}

				.right {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					font-size: 30rpx;
				}
			}

			.recommd {
				color: #666666;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;
				border-top: 2rpx solid #E2E2E5;

				.hujiao {
					padding: 10rpx 20rpx;
					color: #FFFFFF;
					border-radius: 60rpx;
					background: #3587F7;
				}
			}
		}

		.btn-group {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: absolute;
			left: 5%;
			bottom: 20rpx;
			width: 90%;


			.left-btn {
				border: 2rpx solid #3587F7;
				color: #3587F7;
				padding: 20rpx;
				width: 45%;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
			}

			.right-btn {
				border: 2rpx solid #999999;
				color: #999999;
				padding: 20rpx;
				width: 45%;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
			}
		}

	}

	.cancel-container {
		width: 100%;
		position: relative;
		background: #FFFFFF;
		height: 40vh;
		overflow: scroll;
		padding: 20rpx 40rpx;

		.top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				font-size: 36rpx;
				font-weight: bolder;
				color: #1A1A1A;
			}
		}

		.time {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-top: 20rpx;

			.desc {
				font-size: 30rpx;
				font-weight: 400;
				color: #999999;
			}
		}

		.order-info {
			margin-top: 40rpx;

			.order-start {
				padding: 10rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-direction: row;
			}

			.order-end {
				padding: 10rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-direction: row;
			}

			.red {
				width: 15rpx;
				height: 15rpx;
				border-radius: 50%;
				background-color: #FD5C5B;
				margin-right: 10rpx;
			}

			.green {
				width: 15rpx;
				height: 15rpx;
				border-radius: 50%;
				background-color: #49B992;
				margin-right: 10rpx;
			}
		}

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			width: 90%;
			height: 100rpx;
			background: linear-gradient(180deg, #3FA3F9 0%, #2D7BF7 100%);
			color: #FFFFFF;
			border-radius: 20rpx;
			font-size: 32rpx;
			position: absolute;
			bottom: 20rpx;
			left: 5%;

			.small {
				font-size: 22rpx;
				margin-top: 10rpx;
			}
		}
	}

	.order-container {
		width: 100%;
		position: relative;
		background: #FFFFFF;
		height: 40vh;
		overflow: scroll;
		padding: 20rpx 40rpx;

		.top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				font-size: 36rpx;
				font-weight: bolder;
				color: #1A1A1A;
			}
		}

		.time {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-top: 20rpx;

			.desc {
				font-size: 30rpx;
				font-weight: 400;
				color: #999999;
			}
		}

		.tips {
			margin-top: 20rpx;
			border-top: 2rpx solid #F1F1F1;
			background: #F2F2F7;
			border-radius: 20rpx;
			color: #2F61B4;
			padding: 20rpx 30rpx;
		}

		.car-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 50rpx 0;

			.left-info {
				display: flex;
				align-items: flex-start;
				justify-content: center;
				flex-direction: column;
				width: 50%;

				.chepai {
					padding: 10rpx 20rpx;
					border-radius: 10rpx;
					background: linear-gradient(180deg, #3587F7 0%, #2D7BF7 100%);
					color: #FFFFFF;
				}

				.pingfen {
					color: #333333;
					font-size: 24rpx;
					margin-top: 20rpx;
					font-weight: bolder;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.right-info {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				width: 50%;
				position: relative;

				.car {
					width: 250rpx;
				}

				.person {
					width: 150rpx;
					position: absolute;
					top: 0;
				}
			}
		}

		.btn-group {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: 28rpx;

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				width: 20%;

				.icon {
					width: 30rpx;
					height: 30rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}

	.okorder-container {
		width: 100%;
		position: relative;
		background: #FFFFFF;
		height: 70vh;
		overflow: scroll;
		padding: 20rpx 40rpx;

		.title {
			color: #000000;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;

			.left {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 38rpx;
				font-weight: bolder;
			}

		}

		.desc {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
		}

		.price-container {
			padding-top: 40rpx;
			color: #000000;

			.price {
				font-size: 44rpx;
				font-weight: bolder;
				width: 100%;
				text-align: center;
			}

			.price-detail {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				margin-top: 20rpx;

				.label {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}

				.value {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}
			}

			.open {
				text-align: center;
				font-size: 22rpx;
				color: #999999;
				margin-top: 10rpx;
			}

			.xingcheng-title {
				font-size: 32rpx;
				font-weight: bolder;
				color: #333333;
				margin-top: 20rpx;

				.sub-title {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					margin-left: 10rpx;
				}
			}

			.xingcheng-item {
				font-weight: 500;
				color: #333333;
				font-size: 26rpx;
				margin-top: 10rpx;
			}

			.circle {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				background: #0058FF;
			}
		}

		.driver-info {
			background: #F2F2F7;
			border-radius: 20rpx;
			margin-top: 40rpx;

			.top {
				width: 100%;
				padding: 40rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				color: #666666;
				border-bottom: 2rpx solid #E2E2E5;

				.icon {
					width: 80rpx;
					height: 80rpx;
				}

				text {
					margin-left: 20rpx;
				}
			}

			.btn-group {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				font-size: 28rpx;
				padding: 30rpx 0;

				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					width: 20%;

					.icon {
						width: 30rpx;
						height: 30rpx;
						margin-bottom: 10rpx;
					}
				}
			}
		}

		.pingjia {
			background: #F2F2F7;
			border-radius: 20rpx;
			padding: 40rpx;
			margin-top: 40rpx;

			.pingjia-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}

			.xingxing {
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 100%;
				padding-top: 40rpx;

				.icon {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
	}

	.payorder-container {
		width: 100%;
		position: relative;
		background: #FFFFFF;
		height: 70vh;
		overflow: scroll;
		padding: 20rpx 40rpx;

		.title {
			color: #000000;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;

			.left {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 38rpx;
				font-weight: bolder;
			}

		}

		.desc {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
		}

		.price-container {
			padding-top: 40rpx;
			color: #000000;

			.price {
				font-size: 44rpx;
				font-weight: bolder;
				width: 100%;
				text-align: center;
			}

			.price-detail {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				margin-top: 20rpx;

				.label {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}

				.value {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}
			}
		}

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			width: 90%;
			height: 100rpx;
			background: linear-gradient(180deg, #3FA3F9 0%, #2D7BF7 100%);
			color: #FFFFFF;
			border-radius: 20rpx;
			font-size: 32rpx;
			position: absolute;
			bottom: 20rpx;
			left: 5%;

			.small {
				font-size: 22rpx;
				margin-top: 10rpx;
			}
		}
	}
</style>
